<script setup lang="ts">

import {Perm} from "@/utils/enum-type";
import {useUserViewStore} from "@/store/views/sys/admin/userStore";
import {storeToRefs} from "pinia";
import {openConfirm} from "@/components/MyComponent/XMessageBox";
import {deleteUserApi} from "@/api/sys/admin/user";
import {useSysStore} from "@/store/modules/sys";

const store = useUserViewStore()
const sysStore = useSysStore()
const {isPhone} = storeToRefs(sysStore)
const {getList, handleBatchSelect, open, openSetRoles, openRePassword} = store

const {
  tableData,
  queryData,
  statusOptions,
  genderOptions,
} = storeToRefs(store)

// table排序
async function sortTable(sort: {
  prop: string,
  order: 'descending' | 'ascending' | null
}) {
  if (sort.order === 'descending' || !sort.order) {
    queryData.value.order = {key: sort.prop, value: 'desc'}
  } else {
    queryData.value.order = {key: sort.prop, value: 'asc'}
  }
  await getList()
}

// 删除
async function openDelete(id: number) {
  if (await openConfirm('确定删除用户')) {
    await deleteUserApi(id)
    ElMessage.success('删除成功')
    await getList()
  }
}

watch([() => queryData.value.pageSize, () => queryData.value.currentPage], async () => {
  await getList()
})

onMounted(async () => {
  useUserViewStore().$reset()
  await getList()
})
</script>

<template>
  <x-card>
    <el-table :data="tableData" style="width: 100%" show-overflow-tooltip @sort-change="sortTable"
              @selection-change="handleBatchSelect">
      <el-table-column type="selection" width="40"/>
      <el-table-column label="头像" min-width="60">
        <template #default="{row}">
          <x-image :url="row.avatar" :size="3"/>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" min-width="120" sortable="custom"/>
      <el-table-column prop="nickname" label="昵称" min-width="120" sortable="custom"/>
      <el-table-column prop="gender" label="性别" min-width="80" sortable="custom">
        <template #default="{row}">
          <x-tag :value="row.gender" :options="genderOptions"/>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" min-width="100"/>
      <el-table-column prop="status" label="状态" min-width="60" sortable="custom">
        <template #default="{row}">
          <x-tag :value="row.status" :options="statusOptions"/>
        </template>
      </el-table-column>
      <el-table-column
          v-perm="[[Perm.SysUserRePassword],[Perm.SysUserEdit],[Perm.SysUserDelete]]"
          :fixed="isPhone ? false : 'right' " label="操作" :show-overflow-tooltip="false" min-width="240">
        <template #default="{row,column,$index}">
          <el-button v-perm="Perm.SysUserSetRoles" link type="primary" size="small"
                     @click="openSetRoles(row.id)">
            <i-ep-user/>
            <span>分配角色</span>
          </el-button>
          <el-button v-perm="Perm.SysUserRePassword" link type="primary" size="small"
                     @click="openRePassword(row.id)">
            <i-ep-refresh/>
            <span>重置密码</span>
          </el-button>
          <el-button v-perm="Perm.SysUserEdit" link type="primary" size="small" @click="open(row.id)">
            <i-ep-edit/>
            <span>编辑</span>
          </el-button>
          <el-button v-perm="Perm.SysUserDelete" link type="danger" size="small" @click="openDelete(row.id)">
            <i-ep-delete/>
            <span>删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </x-card>
</template>

<style scoped lang="scss">

</style>